<template>
  <div class="foot">
    <div
      v-for="(v, i) in arr"
      :key="i"
      @click="fun(v, i)"
      :class="{ red: num == i }"
    >
      <img :src="v.img" alt="">
      <span>{{ v.val }}</span>
    </div>

  </div>
</template>

<script>
// import Vue from "vue";
// import { Icon } from "vant";

// Vue.use(Icon);
export default {
    
  data() {
    return {
      num: 0,
      arr: [
        {img:"../../../../public/qiaoxiaodong/dibu1.png",val:"试用中心",code:0},
        {img:"../../../../public/qiaoxiaodong/dibu2.png",val:"试用报告",code:1},
        {img:"../../../../public/qiaoxiaodong/dibu3.png",val:"我的",code:2},
        
      ],
    };
  },
  methods: {
    fun(v, i) {
      this.num = i;
      if (this.num == 1) {
          this.$router.push("/sybg")
      }
      if (this.num == 2) {
          this.$router.push("/wode")
      }
    },
  },
};
</script>

<style scoped>
.foot {
  width: 100%;
  height: 1.3rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: fixed;
  bottom: 0;
  background: #fff;
  border-bottom: 1px solid #eeeeee;
}
.red {
  color: red;
}
.left {
  /* flex: 1; */
  margin-left: -0.2rem;
}
img {
  text-align: center;
}
.right {
  /* flex: 1; */
  margin-left: 0.2rem;
}
span {
  font-size: 0.28rem;
}
</style>